import React, {Component} from 'react'

export class ListItem extends Component {
	render(){
		return (
			<li>{this.props.text}</li>
		)
	}
}

export class List extends Component {
	render() {
		return (
			<ul>
				{this.props.lists.map((list, index) =>
					<ListItem key={index}
							  {...list}
							  onClick={() => this.props.onToDoClick(index)}
					/>
				)}
			</ul>
		)
	}
}

export class AddToDo extends Component {
	render() {
		return (
			<div>
				<input ref="input" />		
				<button onClick={this.props.onAddClick}>add</button>
			</div>
		)
	}
}
